<template>
	<v-card min-height="100vh">
		<!-- 文章标题 -->
		<div class="pa-3 text-center text-h5 font-weight-bold blue--text text--lighten-2">
			{{artInfo.title}}
		</div>
		<!-- <v-divider class="ma-3 pa-2"></v-divider> -->
		<div class="ml-3 mr-3 mt-4 pl-2 pr-3">
			<v-icon small>{{'mdi-account'}}</v-icon>
			<span class="text-caption">※听雨※</span>

			<v-icon small class="ml-5">{{'mdi-calendar-month'}}</v-icon>
			<span class="text-caption">{{artInfo.CreatedAt | dateformat('YYYY-MM-DD HH:SS')}}</span>

		</div>
		<v-divider class="ma-3 pa-2"></v-divider>

		<!-- 概述 -->
		<v-alert border="left" elevation="2" color="blue" dark outlined class="ma-4 pa-3">
			{{artInfo.desc}}
		</v-alert>
		<!-- 文章内容 -->
		<div class="content ma-4 pa-3 text-justify" v-html="artInfo.content"></div>
	</v-card>

</template>
<script>
	import Prism from 'prismjs';

	export default {
		props: ['id'],
		data() {
			return {
				artInfo: {},

			}
		},
		created() {
			this.getArtInfo();
		},
		methods: {
			async getArtInfo() {
				const { data: res } = await this.$axios.get(`article/${this.id}`);
				this.artInfo = res.data;
			}
		},
	}
</script>
<style scoped>
	.content>>>img,
	span,
	p {
		max-width: 96%;
	}
</style>